
import 'package:flutter/material.dart';
import 'package:flutter_deer/res/resources.dart';
import 'package:flutter_deer/routers/fluro_navigator.dart';
import 'package:flutter_deer/util/other_utils.dart';
import 'package:flutter_deer/util/theme_utils.dart';
import 'package:flutter_deer/widgets/load_image.dart';
import 'package:flutter_deer/widgets/my_app_bar.dart';
import 'package:flutter_deer/widgets/my_scroll_view.dart';
import 'package:flutter_deer/widgets/my_card.dart';
import 'package:flutter_deer/util/image_utils.dart';
import 'package:flutter_deer/index/models/play_entity.dart';
import 'package:flutter_deer/widgets/text_field_item.dart';
import 'package:flutter_deer/widgets/text_label_item.dart';
import 'package:flutter_gen/gen_l10n/deer_localizations.dart';

class IndexDetailPage extends StatefulWidget {

  const IndexDetailPage({super.key});

  @override
  _IndexDetailPageState createState() => _IndexDetailPageState();
}

class _IndexDetailPageState extends State<IndexDetailPage> {
  
  List<PlayRatioItems> playRatioItemList = <PlayRatioItems>[];

  @override
  Widget build(BuildContext context) {
    final Color red = Theme.of(context).colorScheme.error;
    final TextStyle? textTextStyle = Theme.of(context).textTheme.bodyMedium?.copyWith(fontSize: Dimens.font_sp12);
    final bool isDark = context.isDark;
    playRatioItemList.insert(0,PlayRatioItems(id:1,playId:1,score:'1:0',odds:'5.01%'));
    playRatioItemList.insert(1,PlayRatioItems(id:2,playId:1,score:'2:0',odds:'2.73%'));
    playRatioItemList.insert(2,PlayRatioItems(id:3,playId:1,score:'2:1',odds:'2.31%'));
    playRatioItemList.insert(3,PlayRatioItems(id:4,playId:1,score:'3:1',odds:'1.03%'));
    playRatioItemList.insert(4,PlayRatioItems(id:5,playId:1,score:'3:1',odds:'0.58%'));
    playRatioItemList.insert(5,PlayRatioItems(id:6,playId:1,score:'0:0',odds:'6.01%'));
    playRatioItemList.insert(6,PlayRatioItems(id:7,playId:1,score:'1:1',odds:'4.62%'));
    playRatioItemList.insert(7,PlayRatioItems(id:8,playId:1,score:'2:2',odds:'1.31%'));
    playRatioItemList.insert(8,PlayRatioItems(id:9,playId:1,score:'0:1',odds:'4.62%'));
    return Scaffold(
      appBar: MyAppBar(
        centerTitle: '国际赛21岁以下'
      ),
      body: MyScrollView(
        key: const Key('index_detail'),
        children: <Widget>[
          DecoratedBox(
            decoration: BoxDecoration(
              color: isDark ? Colours.dark_bg_color : Colors.orange,
              gradient: LinearGradient(colors: [Colours.gradient_blue, Color(0xFF4647FA)])
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 0.0),
              child: MyCard(
                color: Colors.transparent,
                child: Container(
                  height: 100.0,
                  padding: const EdgeInsets.only(top: 0.0,left:10,right:10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          LoadImage('http://47.122.45.246/admin/sys-file/science/baa1ff762aa34461be84ba5fba1605c6.png',width:40,height: 40),
                          SizedBox(width: 12),
                          Text("捷克",style: textTextStyle)
                        ]
                      ),
                      LoadAssetImage('vs',format:ImageFormat.png,width:50,height:50),
                      Row(
                        children: <Widget>[
                          LoadImage('http://47.122.45.246/admin/sys-file/science/90b3b1d484524156b9ed2d1a399bd987.png',width:40,height: 40),
                          SizedBox(width: 12),
                          Text("德国",style: textTextStyle)
                        ]
                      )
                    ]
                  )
                )
              )
            )
          ),
          Gaps.vGap8,
          DecoratedBox(
            decoration: BoxDecoration(
              color: isDark ? Colours.dark_bg_color : Colors.orange,
              gradient: LinearGradient(colors: [Colours.gradient_blue, Color(0xFF4647FA)])
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 0.0),
              child: MyCard(
                borderRadius: 0.0,
                child: Container(
                  padding: const EdgeInsets.only(top: 20.0,bottom:20.0,left:10,right:10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Text("0.00"),
                          SizedBox(height: 12),
                          Text("可用余额",style: textTextStyle)
                        ]
                      ),
                      Column(
                        children: <Widget>[
                          Text("0.00"),
                          SizedBox(height: 12),
                          Text("活动金",style: textTextStyle)
                        ]
                      )
                    ]
                  )
                )
              )
            )
          ),
          Gaps.vGap8,
          Text('${DeerLocalizations.of(context)!.gamePositiveWave.nullSafe}',style: TextStyles.textBold18),
          Gaps.vGap8,
          Padding(
            padding: const EdgeInsets.only(left:50,right:50,top: 15,bottom: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children:<Widget>[
                Text('${DeerLocalizations.of(context)!.score.nullSafe}',style: TextStyles.textBold14),
                Text('${DeerLocalizations.of(context)!.odds.nullSafe}',style: TextStyles.textBold14),
                Text('操作',style: TextStyles.textBold14)
              ]
            ),
          ),
          ListView.builder(
            // 如果滚动视图在滚动方向无界约束，那么shrinkWrap必须为true
            shrinkWrap: true,
            // 禁用ListView滑动，使用外层的ScrollView滑动
            physics: const NeverScrollableScrollPhysics(),
            itemCount: playRatioItemList.length,
            itemBuilder: (_, index) => _buildAntiWaveItem(index),
          ),
          Gaps.vGap8,
          Text('${DeerLocalizations.of(context)!.gameAntiWave.nullSafe}',style: TextStyles.textBold18),
          Gaps.vGap8,
          Padding(
            padding: const EdgeInsets.only(left:50,right:50,top: 15,bottom: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children:<Widget>[
                Text('${DeerLocalizations.of(context)!.score.nullSafe}',style: TextStyles.textBold14),
                Text('${DeerLocalizations.of(context)!.odds.nullSafe}',style: TextStyles.textBold14),
                Text('操作',style: TextStyles.textBold14)
              ]
            ),
          ),
          ListView.builder(
            // 如果滚动视图在滚动方向无界约束，那么shrinkWrap必须为true
            shrinkWrap: true,
            // 禁用ListView滑动，使用外层的ScrollView滑动
            physics: const NeverScrollableScrollPhysics(),
            itemCount: playRatioItemList.length,
            itemBuilder: (_, index) => _buildAntiWaveItem(index),
          ),
        ]
      )
    );
  }

  Widget _buildAntiWaveItem(int index) {
    final PlayRatioItems item = playRatioItemList[index];
    final score = item.score;
    final odds = item.odds;
    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border(
          bottom: Divider.createBorderSide(context, width: 0.8),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.only(left: 50,right: 50,top: 15,bottom: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(score.toString(),style: TextStyles.textBold14),
            Text(odds.toString(),style: TextStyles.textBold14),
            InkWell(
              onTap: () => _showCustomModalBottomSheet(index),
              child: Text('${DeerLocalizations.of(context)!.placeAnOrder.nullSafe}',style: TextStyles.textBold14)
            )
          ]
        )
      )
    );
  }

  void _showCustomModalBottomSheet(int index) async {
    final PlayRatioItems item = playRatioItemList[index];
    showModalBottomSheet<void>(
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Container(
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: const Radius.circular(20.0),
              topRight: const Radius.circular(20.0),
            ),
          ),
          height: MediaQuery.of(context).size.height / 2.0,
          child: Column(children: [
            SizedBox(
              height: 50,
              child: Stack(
                textDirection: TextDirection.rtl,
                children: [
                  Center(
                    child: Text(
                      '${DeerLocalizations.of(context)!.placeAnOrder.nullSafe}',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 16.0),
                    ),
                  ),
                  IconButton(
                      icon: Icon(Icons.close),
                      onPressed: () {
                        Navigator.of(context).pop();
                      }),
                ],
              ),
            ),
            Divider(height: 1.0),
            Expanded(
              child: Column(
                children: <Widget>[
                  TextLabelItem(
                    title: '${DeerLocalizations.of(context)!.score.nullSafe}',
                    hintText: item.score.toString(),
                  ),
                  TextLabelItem(
                    title: '${DeerLocalizations.of(context)!.odds.nullSafe}',
                    hintText: item.odds.toString(),
                  ),
                  TextFieldItem(
                    title: '${DeerLocalizations.of(context)!.transactionAmount.nullSafe}',
                    hintText: '${DeerLocalizations.of(context)!.transactionAmountTip.nullSafe}',
                  ),
                ]
              )
            ),
          ]),
        );
      },
    );
  }

}